import * as React from 'react';
import {Text, View, StyleSheet, Image, ScrollView,FlatList} from 'react-native';
import Images from '../../../images/images';
import screen from '../../../utils/screen';
import TouchableView from '../../../components/touchableView';
import {useState} from 'react';

const SatMenu = ({data,onClose,onListShow,onRefresh,onCloseDebug})=>{

    const [showList,setShowList] = useState(false)


    const renderSatList = ()=>{
        return data.map((item,index)=>{
            const {elevation,azimuth,startTime,restMinutes} = item
            return (
                <View key={index.toString()} style={{padding:screen.PIXEL_20}}>
                    {elevation > 0 ? (
                        <Text>正在过境:仰角{parseInt(elevation)},方位角{parseInt(azimuth)}，剩余时间{restMinutes}</Text>
                    ) :(
                        <Text>仰角{parseInt(elevation)},方位角{parseInt(azimuth)}，过境时间{startTime}</Text>
                    )}
                </View>
            )
        })
    }

    return (
        <View style={styles.container}>

            <ScrollView>

                <TouchableView style={styles.moduleView} onPress={onRefresh}>
                    <Text style={styles.title}>刷新卫星数据</Text>
                    <Text style={styles.rightText}>1</Text>
                </TouchableView>

                <TouchableView style={styles.moduleView}>
                    <Text style={styles.title}>刷新频率</Text>
                    <Text style={styles.rightText}>20秒</Text>
                </TouchableView>

                <TouchableView
                    style={styles.moduleView}
                    onPress={()=>{
                        onListShow()
                        // setShowList(!showList)
                    }}
                >
                    <Text style={styles.title}>卫星列表</Text>
                    <Text style={styles.rightText}>全部</Text>
                </TouchableView>
                {
                    showList && (
                        <View>
                            {renderSatList()}
                        </View>
                    )
                }

                <TouchableView style={styles.moduleView} onPress={onCloseDebug}>
                    <Text style={styles.title}>关闭调试</Text>
                    <Text style={styles.rightText}></Text>
                </TouchableView>
            </ScrollView>


            <TouchableView style={styles.moduleView} onPress={onClose}>
                <Text style={styles.title}>关闭</Text>
            </TouchableView>
        </View>
    )
}
export default SatMenu
const styles = StyleSheet.create({
    container:{
        flex:1,marginTop: 200,backgroundColor: '#fff'
    },
    moduleView: {
        backgroundColor: '#fff',  height: screen.PIXEL_88,
        paddingHorizontal: screen.PIXEL_30, flexDirection: 'row', alignItems: "center",
         justifyContent: 'space-between',
        borderBottomWidth:0.3,borderBottomColor:'#eee'
    },
    title: {
        color:'#7E8B94',fontSize:13
    },
    rightText:{
        color:'#333',fontSize:13
    },
})
